<template>
  <div class="page-wrapper">

    <el-card class="box-card" style="width: 100%; border: none;" shadow="never">

      <el-row :gutter="20" class="num-card">
        <el-col :span="8">
          <div class="item">
            <span>累计用户</span>
            <p>12312人</p>
          </div>
        </el-col>
        <el-divider direction="vertical" />
        <el-col :span="8">
          <div class="item">
            <span>留存音值</span>
            <p>12312.000</p>
          </div>
        </el-col>
        <el-divider direction="vertical" />
        <el-col :span="8">
          <div class="item">
            <span>留存音波</span>
            <p>12312.0012</p>
            <em />
          </div>
        </el-col>
      </el-row>

      <el-form :inline="true" label-position="top" :model="searchForm" class="demo-form-inline">
        <el-form-item label="关键字搜索" size="small" style="margin-right: 30px">
          <el-input v-model="searchForm.user" placeholder="会员UID/会员手机" />
        </el-form-item>

        <el-form-item label="信用度" size="small" style="margin-right: 30px">
          <el-select v-model="searchForm.region" placeholder="请选择">
            <el-option label="全部" value="0" />
            <el-option label="一星" value="1" />
            <el-option label="二星" value="2" />
            <el-option label="三星" value="3" />
            <el-option label="四星" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="IP地址搜索" size="small" style="margin-right: 30px">
          <el-input v-model="searchForm.ip" placeholder="请输入IP/地区" />
        </el-form-item>

        <el-form-item label="查询时间" size="small" style="margin-right: 20px">
          <el-date-picker
            v-model="searchForm.datetime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>

        <el-form-item label="操作" size="small">
          <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>

        </el-form-item>

      </el-form>
    </el-card>

    <el-card class="box-card" style="width: 100%; border: none; margin: 20px 0;" shadow="never">
      <div>
        <el-button icon="el-icon-download" size="small" type="primary" @click="onSubmit">导出</el-button>
        <el-button icon="el-icon-plus" size="small" type="primary" @click="()=>{addUserVisible = true}">新增用户</el-button>
        <el-button icon="el-icon-bell" size="small" type="primary" @click="()=>{setWarnVisible = true}">设置预警数值</el-button>
        <el-button icon="el-icon-tickets" size="small" type="primary" @click="openEditor">配置用户协议</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%; margin-top: 20px"
        stripe
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />

        <el-table-column
          label="会员UID"
          prop="date"
        />
        <el-table-column
          label="会员手机"
          prop="name"
        />
        <el-table-column
          label="待划转音值"
          prop="name"
        />
        <el-table-column
          label="音值"
          prop="name"
        />
        <el-table-column
          label="音波"
          prop="name"
        />

        <el-table-column
          label="冻结音波"
          prop="name"
        />

        <el-table-column
          label="今日买入音值"
          prop="name"
        />

        <el-table-column
          label="今日卖出音值"
          prop="name"
        />

        <el-table-column
          label="信用度"
          prop="name"
        />

        <el-table-column
          label="身份证号"
          prop="name"
        />

        <el-table-column
          label="状态"
          prop="name"
        />

        <el-table-column
          label="注册时间"
          prop="name"
        />

        <el-table-column
          label="最后登录时间"
          prop="name"
        />

        <el-table-column
          label="登录IP"
          prop="name"
        />

        <el-table-column
          label="常用地"
          prop="name"
        />

        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              style="margin-right: 10px"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>

            <el-popconfirm
              title="确定冻结该用户吗？"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >冻结</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000"
        style="margin-top: 20px"
      />
    </el-card>

    <el-dialog title="新建用户" width="480px" :visible.sync="addUserVisible">
      <el-form size="small" :model="addUSerForm" label-width="100px">
        <el-form-item label="会员天音号">
          <el-input v-model="addUSerForm.id" placeholder="请输入会员天音号" style="width: 270px" />
          <el-button style="margin-left: 10px">搜索</el-button>
        </el-form-item>
        <el-form-item label="会员姓名">
          <el-input v-model="addUSerForm.id" placeholder="请输入会员姓名" style="width: 270px" />
        </el-form-item>
        <el-form-item label="会员手机号">
          <el-input v-model="addUSerForm.id" placeholder="请输入会员手机号" style="width: 270px" />
        </el-form-item>
        <el-form-item label="会员身份证号">
          <el-input v-model="addUSerForm.id" placeholder="请输入会员身份证号" style="width: 270px" />
        </el-form-item>
        <el-form-item label="设置密码">
          <el-input v-model="addUSerForm.id" placeholder="请输入密码" style="width: 270px" />
          <el-tooltip content="6-20位数字字母组合密码" placement="top">
            <i style="margin-left: 10px" class="el-icon-question" />
          </el-tooltip>
        </el-form-item>

        <el-form-item label="设置常用地">
          <el-cascader
            v-model="selectedOptions"
            :options="options"
            style="width: 270px"
            placeholder="请设置常用地"
            @change="handleChange"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="编辑用户" width="480px" :visible.sync="editUserVisible">
      <el-form size="small" :model="editUSerForm" label-width="100px">
        <el-form-item label="会员UID">
          <el-input v-model="addUSerForm.id" placeholder="请输入会员天音号" style="width: 270px" />
        </el-form-item>
        <el-form-item label="会员姓名">
          <el-input v-model="addUSerForm.id" placeholder="请输入会员姓名" style="width: 270px" />
        </el-form-item>
        <el-form-item label="会员手机号">
          <el-input v-model="addUSerForm.id" placeholder="请输入会员手机号" style="width: 270px" />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="addUSerForm.id" placeholder="请选择">
            <el-option
              v-for="item in [{
                value: '选项1',
                label: '黄金糕'
              }, {
                value: '选项2',
                label: '双皮奶'
              }, {
                value: '选项3',
                label: '蚵仔煎'
              }]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-tooltip content="设置用户的状态" placement="top">
            <i style="margin-left: 10px" class="el-icon-question" />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="常用地">
          <el-cascader
            v-model="selectedOptions"
            :options="options"
            style="width: 270px"
            placeholder="请设置常用地"
            @change="handleChange"
          />
          <el-tooltip content="设置用户的常用地" placement="top">
            <i style="margin-left: 10px" class="el-icon-question" />
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="设置预警数值" width="480px" :visible.sync="setWarnVisible">
      <el-form size="small" :model="setWarnForm" label-width="140px">
        <el-form-item label="卖出音值异常值">
          <el-input v-model="setWarnForm.id" placeholder="请输入卖出音值异常值" style="width: 270px" />
          <el-tooltip content="设置当天出售音值超出时预警" placement="top">
            <i style="margin-left: 10px" class="el-icon-question" />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="买入音值异常值">
          <el-input v-model="setWarnForm.id" placeholder="请输入买入音值异常值" style="width: 270px" />
          <el-tooltip content="设置当天买入音值超出时预警" placement="top">
            <i style="margin-left: 10px" class="el-icon-question" />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="账户资金预警">
          <el-input v-model="setWarnForm.id" placeholder="请输入账户资金预警" style="width: 270px" />
          <el-tooltip content="设置当天用户音值或音波数值超出时预警" placement="top">
            <i style="margin-left: 10px" class="el-icon-question" />
          </el-tooltip>
        </el-form-item>
        <el-form-item label="取消订单次数预警">
          <el-input v-model="setWarnForm.id" placeholder="设置当天用户取消订单次数超出时预警" style="width: 270px" />
          <el-tooltip content="设置用户的状态" placement="top">
            <i style="margin-left: 10px" class="el-icon-question" />
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="设置用户协议" width="680px" :visible.sync="setAgreementVisible">
      <div class="tinymce-editor">
        <editor id="tinymce" v-model="myValue" :init="init" />
        <div style="margin: 20px auto; text-align: center;">
          <el-button size="small" type="primary" @click="submitAgreement">保存</el-button>
          <el-button size="small">取消</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { regionData, CodeToText } from 'element-china-area-data'

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons.min.js'

import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件

export default {
  name: 'UserManage',
  components: { Editor },
  data() {
    return {
      searchForm: {
        user: '',
        region: '',
        ip: '',
        date: ''
      },
      options: regionData,
      selectedOptions: [],
      addUSerForm: {
        id: ''
      },
      editUSerForm: {
        id: ''
      },
      setWarnForm: {
        id: '',
        datetime: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      search: '',
      multipleSelection: [],
      addUserVisible: false,
      editUserVisible: false,
      setWarnVisible: false,
      setAgreementVisible: false,
      myValue: '',
      init: {
        language_url: '/tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/tinymce/skins/ui/oxide', // skin路径
        height: 400, // 编辑器高度
        menubar: true, // 顶部菜单栏显示
        branding: true, // 去水印
        elementpath: false, // 禁用编辑器底部的状态栏
        statusbar: false, // 隐藏编辑器底部的状态栏
        paste_data_images: true, // 允许粘贴图像
        plugins: 'image table media lists wordcount'
      }
    }
  },
  mounted() {

  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleChange() {
      var loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]]
      }
      alert(loc)
    },
    // 编辑
    handleEdit(index, row) {
      this.editUserVisible = true
      console.log(index, row)
    },
    onSubmit() {
      alert(123)
    },
    // 打开编辑器
    openEditor() {
      this.setAgreementVisible = true
      this.$nextTick(() => {
        tinymce.init({}).then(() => {
          tinymce.activeEditor.setContent('<p>请开始你的表演</p>')
        })
      })
    },
    // 提交协议
    submitAgreement() {
      console.log(tinymce.activeEditor.getContent())
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
